<template>
    <div class="post_attach">
        <el-collapse>
            <el-collapse-item title="发布" name="1">
                <div class="">
                    <el-form>
                        <el-form-item label="">
                    <el-select v-model="status" placeholder="状态">
                        <el-option
                                v-for="item in statuses"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                        </el-form-item>
                        <el-form-item label="">
                            <el-select v-model="secret" placeholder="公开度">
                                <el-option
                                        v-for="item in secrets"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button-group>
                                <el-button type="primary" @click="save">保存草稿</el-button>
                                <el-button type="primary" @click="publish">发布</el-button>
                            </el-button-group>
                        </el-form-item>
                    </el-form>
                </div>
            </el-collapse-item>
            <el-collapse-item title="分类目录" name="2">
                <div>
                    <el-select v-model="category" clearable placeholder="请选择">
                        <el-option
                                v-for="item in categorys"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </el-collapse-item>
            <el-collapse-item title="标签" name="3">
                <div>
                    <el-select v-model="tag" multiple placeholder="请选择">
                        <el-option
                                v-for="item in tags"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </el-collapse-item>
            <el-collapse-item title="插入头图" name="4">
                <div>
                    <el-upload
                            class="avatar-uploader"
                            :action="action"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
    import {log,buildParams} from '@/assets/js/util.js'
    export default{
        props:['bus'],
        name: 'post_attach',
        data () {
            return {
                msg: 'post_attach',
                status: '',
                secret:'',
                category:'',
                tag:'',
                statuses:post_status,
                secrets:post_secret,
                categorys:[],
                tags:[],
                action:'',
                imageUrl:''
            }
        },
        methods:{
            init:function (){
                var url = server_url+'/api/admin/category/collections';
                var params = []
                params[0] = 'type='+categorys.all
                url = url + buildParams(params)
                this.$http.jsonp(url, {}, {
                    headers: {},
                    emulateJSON: true
                }).then(function(response) {
                    this.categorys = response.data.data[0]
                    this.tags = response.data.data[1]
                    log(response)
                }, function(response) {
                    log(response)
                });
            },
            handleAvatarSuccess(res, file) {
                var data = JSON.parse(file.response)
                this.imageUrl = URL.createObjectURL(file.raw);
                this.uploadUrl = data.data.path
                log(this.uploadUrl)
            },
            beforeAvatarUpload(file) {
            },
            publish:function () {
                var data = {}
                data.img = this.uploadUrl
                data.secret = this.secret
                data.type = ''
                data.tags = this.tag
                data.categorys = this.category
                this.bus.$emit('sendAttrs',data)
            },
            save:function () {

            }
        },
        mounted:function () {
            this.action = server_url+'/api/admin/upload'
            this.init()
        }
    }
</script>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .post_attach{
        padding: 15px;
    }
</style>